<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
  <link rel="stylesheet" href="css/cart.css">
</head>
<body>
  <div id="div1">
    <div class="container">
      <my-cart></my-cart>
    </div>
  </div>

  <script type="text/javascript">
    
    const CartTitle = {
        props: ['username_cart'],
        template: `
            <div class="title">{{username_cart}}</div>
        `
    }

    const CartList = {
      props: ['list'],
      template: `
      <div>
          <div :key='item.id' v-for='item in list' class="item">
            <img :src="item.img"/>
            <div class="name">{{item.name}}</div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del" @click='delCart(item.id)'>×</div>
          </div>
        </div>
      `,
      methods: {
        delCart: function(id) {
          this.$emit('del-cart',id);    /*子组件通过del-cart和父组件通信*/
        }
      }
    }

    const CartTotal = {
        props: ['list'],
        template: `
            <div class="total">
            <span>总价：{{sum_total}}</span>
            <button>结算</button>
            </div>
        `,
        computed: {
            sum_total: function() {
                // 计算商品的总价
                let sumTotal = 0;
                this.list.forEach(item => {
                    sumTotal += item.price * item.num;
                });
                return sumTotal;
            }
        }
    }
    
    //定义购物车组件
    Vue.component('my-cart', {
     data: function() {
         return {
            username_cart: '张三的购物车',
            list: [{
                id: 1,
                name: 'TCL彩电1',
                price: 100,
                num: 1,
                img: 'img/a.jpg'
                },{
                id: 2,
                name: '机顶盒2',
                price: 1000,
                num: 1,
                img: 'img/b.jpg'
                },{
                id: 3,
                name: '海尔冰箱',
                price: 1000,
                num: 1,
                img: 'img/c.jpg'
                },{
                id: 4,
                name: '小米手机',
                price: 2000,
                num: 1,
                img: 'img/d.jpg'
                },{
                id: 5,
                name: 'PPTV电视',
                price: 2000,
                num: 2,
                img: 'img/e.jpg'
            }]
         }
         
     },
      template: `
        <div class='cart'>
          <cart-title :username_cart='username_cart' ></cart-title>
          <cart-list :list='list' @del-cart='delCart($event)' ></cart-list>   <!--父组件监听del-cart获得子组件的请求-->
          <cart-total :list='list' ></cart-total>
        </div>
      `,
      components: {
        'cart-title': CartTitle,
        'cart-list': CartList,
        'cart-total': CartTotal
      },
      methods: {
        delCart: function(item_id) {
          // 1. 找到需要删除的index
          const current_item_index = this.list.findIndex(item => {
            return item.id == item_id;
                    /*
                    *   是一个箭头函数，作为 findIndex 方法的参数。这个函数遍历 list 数组中的每一个元素（这里用 item 表示），
                    *    并检查每个元素的 id 属性是否等于传入的 item_id。如果找到匹配的元素，findIndex 就会返回该元素的索引。
                    * */
          });
          // 2. 根据索引删除对应的数据
          this.list.splice(current_item_index,1);
          /*current_item_index：这是 splice 方法的第一个参数，代表要从数组中开始移除元素的索引位置。在 delCart 方法中，
            这个值是通过 findIndex 方法找到的，即要删除的商品的索引位置。

            1：这是 splice 方法的第二个参数，表示要从数组中移除的元素数量。在这里，
            我们传入 1，因为我们只想移除一个元素——即位于 current_item_index 索引位置的元素。
            */
        }
      }
    });

    var vm = new Vue({
      el: '#div1',
      data: {

      }
    });

  </script>
</body>
</html>